<template>
  <div class="content">
    <div class="content">
      <div class="header">
        <h3 class="title">角色列表</h3>
        <el-button type="primary" @click="handleNewUserClick">新建角色</el-button>
      </div>
      <div class="table">
        <el-table :data="entirRoles" border style="width: 100%">
          <el-table-column align="center" type="selection" width="50px" />
          <el-table-column align="center" prop="id" label="id" width="60px" />

          <el-table-column align="center" prop="name" label="角色姓名" width="180px" />
          <el-table-column align="center" prop="info" label="权限描述" width="240px" />
          <el-table-column align="center" prop="enable" label="状态" width="100px">
            <!-- 作用域插槽 -->
            <template #default="scope">
              <el-button size="small" plain :type="scope.row.isLock ? 'primary' : 'danger'">
                {{ scope.row.isLock ? '启用' : '禁用' }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="createAt" label="创建时间">
            <template #default="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="150px">
            <template #default="scope">
              <el-button size="small" icon="Edit" text type="primary" @click="handleEditBtnClick(scope.row)">
                编辑
              </el-button>

              <el-popconfirm title="确定要删除此用户吗？" @confirm="handleDeleteBtnClick(scope.row.id)">
                <template #reference>
                  <el-button size="small" icon="Delete" text type="danger">
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper" :total="10" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useSystemStore from '@/store/main/system/system'
import { storeToRefs } from 'pinia'

import { ref } from 'vue'

const emit = defineEmits(['newClick', 'editClick'])

const currentPage = ref(1)
const pageSize = ref(10)
// 1. 第一次发起action，请求entirRoles的数据
const systemStore = useSystemStore()
systemStore.fetchEntirDataAction()

// 2. 获取entirRoles数据，进行展示
const { entirRoles } = storeToRefs(systemStore)

//=============  分页

// 3.页码相关逻辑
function handleCurrentChange() {
  fetchUserListData()
}
function handleSizeChange() {
  fetchUserListData()
}
// 4.定义函数，发送网络请求
function fetchUserListData(formData: any = {}) {
  // 1. 获取offset/size
  const size = pageSize.value
  const offset = (currentPage.value - 1) * size
  const pageinfo = { size, offset }

  // 2.发起网络请求
  const queryInfo = { ...pageinfo, ...formData }
  // systemStore.postUserListAcion(queryInfo)
}
// ==============

// 5.删除角色的操作
function handleDeleteBtnClick(data: any) {
  const id = { id: data }
  systemStore.deleteRoleDataAction(id)
}

// 6.新建/编辑角色的操作
function handleNewUserClick() {
  emit('newClick')
}
function handleEditBtnClick(itemData: any) {
  emit('editClick', itemData)
}

// 向外暴露方法
defineExpose({ fetchUserListData })
</script>

<style lang="less" scoped>
.content {
  margin-top: 20px;
  background-color: #fff;
  padding: 15px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;

  .title {
    font-size: 22px;
  }
}

.table {
  :deep(.el-table__cell) {
    padding: 12px 0;
  }

  .el-button {
    margin-left: 0;
    padding: 5px 8px;
  }
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
